
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Git Flow、GitHub Flow 与 Trunk-Based Development 对比 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Git Flow、GitHub Flow 与 Trunk-Based Development 对比 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">Git Flow模型中包含哪五个核心分支，它们各自的主要职责是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Git Flow包含五个核心分支：1. 主分支 (main/master): 用于发布稳定版本。2. 开发分支 (develop): 用于集成新功能。3. 功能分支 (feature): 从 develop 分支创建，用于开发单个功能。4. 发布分支 (release): 从 develop 分支创建，用于准备发布版本。5. 热修复分支 (hotfix): 从 main 分支创建，用于紧急修复。</div>
          </div>
          <div class="card-source">来源: 1.2 分支结构</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在Git Flow工作流中，当生产环境出现紧急问题时，应该如何操作？即热修复分支（hotfix）的完整生命周期是怎样的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当生产环境发现问题时，应从 main 分支创建一个 hotfix 分支进行修复。修复完成后，该 hotfix 分支需要合并回 main 分支和 develop 分支，以确保修复内容同步到稳定版本和后续的开发中。</div>
          </div>
          <div class="card-source">来源: 1.3 工作流程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">GitHub Flow的核心思想是什么？它主要适用于什么样的项目场景？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">GitHub Flow的核心思想是通过主分支和功能分支实现快速开发和部署，其中主分支（main）始终是可部署的稳定分支。它适用于需要快速迭代和持续交付的项目，如互联网应用或SaaS产品。</div>
          </div>
          <div class="card-source">来源: 2.1 什么是 GitHub Flow？ 和 2.4 适用场景</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">什么是Trunk-Based Development (TBD)？它的分支结构有何特点？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Trunk-Based Development (TBD) 是一种高度集成的开发模式，所有开发者都在一个主干分支（main）上工作。其分支结构极简，主要由一个主干分支构成，可选地使用短生命周期的功能分支来开发复杂功能。</div>
          </div>
          <div class="card-source">来源: 3.1 什么是 Trunk-Based Development？ 和 3.2 分支结构</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">对比</div>
          <div class="card-question">根据文档，Git Flow和GitHub Flow在创建新功能分支时的主要区别是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">对比</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">主要区别在于功能分支的来源。在Git Flow中，功能分支（feature）是从 develop 分支创建的。而在GitHub Flow中，功能分支（feature）是直接从 main 分支创建的。</div>
          </div>
          <div class="card-source">来源: 1.3 工作流程 和 2.3 工作流程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">为什么说Trunk-Based Development和GitHub Flow对自动化测试的要求比Git Flow更高？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为Trunk-Based Development和GitHub Flow的发布频率极高或高频，代码合并到主干分支后通常会立即触发部署。为了确保主干分支的稳定性和代码质量，必须依赖高度自动化的测试流程。相比之下，Git Flow有专门的release分支进行测试和修复，发布频率较低，对自动化测试的要求相对中等。</div>
          </div>
          <div class="card-source">来源: 4. 三种工作流的对比</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在什么情况下，一个团队应该优先选择使用Git Flow工作流？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当项目需要严格的版本控制（如传统软件或企业级应用）并且发布周期较长（如每月或每季度发布一次）时，应该优先选择Git Flow。这种模式结构清晰，适合管理复杂的版本发布流程。</div>
          </div>
          <div class="card-source">来源: 1.4 适用场景</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">对比</div>
          <div class="card-question">从发布频率和分支结构复杂性两个维度，比较Git Flow、GitHub Flow和Trunk-Based Development。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">对比</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 分支结构：Git Flow最复杂（多分支），GitHub Flow简单（主分支+功能分支），Trunk-Based Development极简（主干分支）。2. 发布频率：Git Flow最低（低频，如每月），GitHub Flow较高（高频，如每天），Trunk-Based Development最高（极高，如每小时）。</div>
          </div>
          <div class="card-source">来源: 4. 三种工作流的对比</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在为项目选择合适的工作流时，需要综合考虑哪四个关键因素？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要考虑四个关键因素：1. 项目规模：大型复杂项目适合Git Flow，中小型项目适合GitHub Flow或TBD。2. 发布频率：低频发布适合Git Flow，高频发布适合GitHub Flow或TBD。3. 团队结构：高度集成的团队适合TBD。4. 自动化程度：自动化能力强的团队适合GitHub Flow或TBD。</div>
          </div>
          <div class="card-source">来源: 6. 如何选择合适的工作流？</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
